import { inject, onMounted, ref } from "vue"
import { mapStore } from "@/store"
export const searchID = () => {
    const store = mapStore()
    let map
    const listInfo = ref([])
    onMounted(() => {
        map = inject('$map')
    })
    const search = () => {
        listInfo.value = []
        // 获取所有图层
        let layers = map.getStyle().layers
        // 获取对应id的图层
        let layers_id = layers.filter(item => item.id.startsWith('event'))
        // 遍历每个图层，获取渲染在地图上的要素
        layers_id.forEach(layer => {
            // 查询该图层上的渲染要素
            let features = map.queryRenderedFeatures({ layers: [layer.id] });
            // 遍历每个渲染要素，打印属性信息
            features.forEach(feature => {
                if (feature.properties.id == store.ID) {
                    listInfo.value.push(feature.properties)
                    console.log(listInfo.value)
                }
            });
        });
    }

    const clear = () => {
        listInfo.value = []
        store.ID = ''
    }

    return {
        search,
        listInfo,
        clear,
    }
}